<script>
  import {
    defineComponent, reactive, toRefs,
  } from '@vue/composition-api';
  import { Pagination } from 'ant-design-vue';

  const Paging = defineComponent({
    name: 'Paging',
    components: {
      [Pagination.name]: Pagination,
    },
    inheritAttrs: false,
    props: {
      pageNo: {
        type: Number,
        required: true,
      },
      pageSize: {
        type: Number,
        required: true,
      },
      count: {
        type: Number,
        required: true,
      },
      pageOptions: {
        type: Object,
        default: () => {
        },
      },
    },
    emits: ['update:pageNo', 'update:pageSize'],
    setup(props, { emit }) {

      function pageChange(page) {
        emit('update:pageNo', page);
      }

      function sizeChange(current, size) {
        emit('update:pageSize', size);
      }

      const pageOption = reactive({
        disabled: false,
        hideOnSinglePage: true,
        pageSizeOptions: ['5', '10', '20'],
        showQuickJumper: true,
        showSizeChanger: true,
        showCounter: true,
        size: '',
        ...props.pageOptions,
      });

      return {
        pageChange,
        sizeChange,
      ...toRefs(pageOption),
      };
    },
  });

  export default Paging;
</script>

<template>
  <div class="flex justify-between items-center p-5">
    <div v-if="showCounter">
      <span>
        共
      </span>
      <span class="text-main-1">
        {{ count }}
      </span>
      <span>
        条记录
      </span>
    </div>
    <div v-else />
    <a-pagination
      :size="size"
      :current="pageNo"
      :page-size="pageSize"
      :total="count"
      :disable="disabled"
      :show-quick-jumper="showQuickJumper"
      :show-size-changer="showSizeChanger"
      :page-size-options="pageSizeOptions"
      :hide-on-single-page="hideOnSinglePage"
      @change="pageChange"
      @showSizeChange="sizeChange"
    />
  </div>
</template>

<style lang="less">
.ant-pagination-item-active {
  background: var(--mainColor1);
  border: none;

  > a {
    color: #fff;
  }
}
</style>
